<template>
    <div class="Details">
        <van-swipe :autoplay="3000" indicator-color="skyblue">
            <van-swipe-item v-for="item in gallery" :key="item.id">
                <img :src="item.img_url" width="100%" style="display: block" alt="">
            </van-swipe-item>
        </van-swipe>
        <Tips />
        <div class="goods_info">
            <h3>{{info.name}}</h3>
            <p>{{info.goods_brief}}</p>
            <section>{{info.retail_price | RMB}}</section>
        </div>
        <van-cell is-link @click="showPopup">展示弹出层</van-cell>
        <van-popup v-model="show">内容</van-popup>
        <div class="good_canshu">
            <h3>商品参数</h3>
            <ul>
                <li v-for="(item,index) in attribute" :key="index">
                    <span>{{item.name}}</span>
                    <p>{{item.value}}</p>
                </li>
            </ul>
        </div>
        <div class="goods_desc" v-html="info.goods_desc"></div>
        <div class="title">
            <div class="line"></div>
            <h2>常见问题</h2>
        </div>
        <ul class="issue">
            <li v-for="item in issue" :key="item.id">
                <h3>{{item.question}}</h3>
                <p>{{item.answer}}</p>
            </li>
        </ul>
        <div class="title">
            <div class="line"></div>
            <h2>相关产品</h2>
        </div>
        <div class="mychanpin">
            <Chanpin :chanpinArr="goodsList" />
        </div>
        <div style="height:50px"></div>
    </div>
</template>

<script>
    import Chanpin from '@/components/Chanpin.vue'
    import Tips from '@/components/Tips.vue'
    import {
        GoodsAboutApi,
        GoodsDetailApi
    } from "@/request/api"
    export default {

        data() {
            return {
                gallery: [], // 轮播图
                info: {}, // 商品信息
                show: false,
                attribute: [], // 产品参数
                issue: [], // 常见问题
                goodsList: [] // 相关产品的列表

            }
        },
        created() {

            let p1 = ()=>{
                new Promise((resolve, reject) => {
                // 请求商品数据
                GoodsDetailApi({
                    id: this.$route.params.id,
                }).then((res) => {
                    // console.log(res);
                    if (res.errno === 0) {
                        resolve(res)

                    }
                });
            })
            }

            let p2 = function (){
                return new Promise((resolve, reject) => {
                // 请求相关产品
                GoodsAboutApi({
                    id: this.$route.params.id,
                }).then((res) => {
                    // console.log(res);
                    if (res.errno === 0) {

                        resolve(res)

                    }

                });
            })
            }
            console.log(p1, p2);

            // async 写在函数前面
            async function getList() {
                // 函数内部语句的前面可以写await
                // 表示先执行这一行一句, 拿到返回结果之后,再执行后面的代码
                let pp1 = await p1();
                let pp2 = await p2();
                console.log(pp1.data,pp2.data);
                
            }

            getList();
            let {
                    gallery,
                    info,
                    attribute,
                    issue
                } = pp1.data;
                this.gallery = gallery;
                this.info = info;
                this.attribute = attribute;
                this.issue = issue;

                let {
                    goodsList
                } = pp2.data;
                this.goodsList = goodsList;

        },
        components: {
            Tips,
            Chanpin
        },
        methods: {
            showPopup() {
                this.show = true;
            }
        }
    }
</script>

<style lang="less" scoped>
    .Details {
        position: relative;
        padding-bottom: 120px;

        .van-cell {
            margin-bottom: 20px;
        }

        .van-popup {
            width: 100%;
            position: absolute;
            background: #fff;




            // bottom: 50px;
            padding: 10px;
            // box-sizing: border-box;
        }

        .goods_info {
            background: #fff;
            text-align: center;
            line-height: 40px;
            padding: 20px 0;
            border-bottom: 1px solid #ccc;

            h3 {
                font-size: 20px;
            }

            p {
                margin: 5px 0;
            }

            section {
                color: darkred;
            }
        }

        .good_canshu {
            font-size: 18px;
            background: #fff;
            padding: 10px;

            ul {
                margin-top: 10px;
                font-size: 14px;

                li {
                    border-radius: 6px;
                    background: #efefef;
                    margin-bottom: 10px;
                    display: flex;
                    height: 30px;
                    justify-content: space-between;
                    align-items: center;

                    span {
                        width: 20%;
                        text-align: right;
                        color: #999;
                        margin-right: 10px;
                    }

                    p {
                        flex: 1;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                    }
                }
            }
        }

        /* less和sass - 预编译语言 - deep深度修改样式 */
        /deep/.goods_desc {
            width: 100%;

            p {
                margin: 0;

                img {
                    display: block;
                    width: 100%;
                }
            }
        }

        .title {
            height: 40px;
            background: #fff;
            position: relative;

            .line {
                width: 50%;
                background: #ccc;
                position: absolute;
                height: 2px;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                margin: auto;
            }

            h2 {
                width: 30%;
                background: #fff;
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                font-size: 16px;
                line-height: 40px;
                margin: auto;
                text-align: center;
            }
        }

        .issue {
            background: #fff;
            padding: 10px 20px;

            li {
                h3 {
                    font-size: 14px;
                    position: relative;

                    &::before {
                        content: "";
                        width: 4px;
                        height: 4px;
                        border-radius: 50%;
                        background: darkred;
                        position: absolute;
                        left: -10px;
                        top: 50%;
                        margin-top: -2px;
                    }
                }

                p {
                    font-size: 12px;
                    color: #999;
                }
            }
        }

        .mychanpin {
            background: #fff;
        }
    }
</style>